/* Shopping Cart
   ========================================================================== */

// hide breadcrumb

body.page-shopping-cart {
	#breadcrumb_navi {
		display: none;
	}
}

// product listing

.order-wishlist {
	padding-left: 0;
	padding-right: 0;
	@media (min-width: $screen-md-min) {
		body.page-shopping-cart & {
			padding-right: $grid-gutter-width;
		}
	}

	@media (max-width: $screen-sm) {
		body.page-shopping-cart & {
			margin: 0 -15px;
			width: calc(100% + 30px);
		}
	}

	table {
		margin-bottom: 0;
		@media (min-width: $screen-md-min) {
			margin-bottom: $line-height-computed;
		}

		tr {
			margin-left: 0;
			margin-right: 0;

			&.item {
				th {
					border-color: $gx-cart-border-color;
					color: $gx-cart-table-head-color;
				}

				td {
					a {
						&.product-title {
							color: $gx-cart-table-color;
						}
					}

					&.image,
					&.product {
						max-width: 245px;
					}

					&.product {
						color: $gx-cart-table-info-color;
					}

					&.text-right {
						color: $gx-cart-table-color;
					}
				}

				.product {
					.error-msg {
						display: none;
						margin-top: 15px;
					}
				}

				&.error {
					.product {
						.error-msg {
							display: block;
						}
					}
				}
			}

			@media (min-width: $screen-md-min) {
				&.item {
					&:last-child {
						td {
							border-bottom: 3px solid $gx-cart-border-color;
						}
					}
				}
			}

			> td {
				padding: 15px 0;
				@media (min-width: $screen-md-min) {
					padding: 8px;
				}

				// cell design

				&.product {
					color: $gx-checkout-table-additional-info-color;

					.product-title {
						display: inline-block;
						margin-bottom: 10px;
						color: $gx-checkout-table-color;
						font-size: $font-size-h4;
					}

					ul {
						@include reset-list();
					}
				}

				&.qty {
					input[type=text] {
						float: none;

						@media (min-width: $screen-sm-min) {
							width: 50px;
							float: left;
						}

						text-align: right;
					}

					a {
						display: inline-block;
                        padding: 9px 10px;
                        margin-left: 5px;
                        
                        &.button-delete {
                            margin-left: 0;
                        }

						@media (min-width: $screen-sm-min) {
							display: block;
							float: left;
						}
					}
				}

				&.price {
					@media (min-width: $screen-md-min) {
						font-size: $font-size-h4;
					}
				}

				// mobile layout for products

				@media (max-width: $screen-xs-max) {
					&.image {
						@include make-xs-column(2);
					}

					&.product {
						@include make-xs-column(6);
					}

					&.qty {
						@include make-xs-column(4);
						text-align: right;
					}

					&.price {
						@include make-xs-column(4);
						float: right;
					}
				}

				@media (max-width: $screen-xs-min) {
					&.image {
						display: none;
					}

					&.qty {
						@include make-xs-column(6);
						text-align: right;
					}
				}

				// apply borders for mobile

				@media (max-width: $screen-xs-max) {
					&.product,
					&.qty {
						border-top-width: 1px;
					}
				}
			}
		}
	}

	.continue-shopping-button-container {
		padding: 0;
		margin-bottom: 20px;
	}
}

// totals

.total-box {
	border-top: 2px solid #E7E7E7;
	color: $gx-total-box-color;
	padding: 0;

	@include background($gx-total-box-top-bg-color,
			$gx-total-box-top-bg-image-url,
			$gx-total-box-top-bg-image-position,
			$gx-total-box-top-bg-image-repeat,
			$gx-total-box-top-bg-image-size,
			$gx-total-box-top-bg-image-attachment,
			$gx-total-box-top-bg-image-enabled,   
			$gx-total-box-top-bg-gradient-enabled,
			$gx-total-box-top-bg-gradient-color1, 
			$gx-total-box-top-bg-gradient-color2, 
			$gx-total-box-top-bg-gradient-type,   
			$gx-total-box-top-bg-gradient-angle);
	
	@include border-radius($gx-cart-border-radius);

	@media (min-width: $screen-md-min) {
		border: 0;
		padding: ($grid-gutter-width / 2) ($grid-gutter-width / 2) 0;
		margin-bottom: ($grid-gutter-width / 2);

		@include box-shadow($gx-shopping-cart-total-box-shadow);
	}

	h2 {
        margin-top: ($line-height-computed / 2);
        margin-bottom: ($line-height-computed / 2);
        font-size: $font-size-h4;
		color: $gx-total-box-color;
	}

	table {
		margin-bottom: 0;

		tr {
			> td {
				border-color: $gx-total-box-border-color;

				@include make-xs-column(6);

				&.colspan-2 {
					@include make-xs-column(12);
				}

				&,
				&.colspan-2 {
					padding: 11px 0;
				}

				&:nth-of-type(2) {
					text-align: right;
				}
				
				&.additional-info {
					border-top: none;
					padding-top: 0;
				}
			}

			&.total {
				@media (min-width: $screen-sm-min) {
					@include make-row;
				}

				display: block;

				@include background($gx-total-box-bottom-bg-color,
						$gx-total-box-bottom-bg-image-url,
						$gx-total-box-bottom-bg-image-position,
						$gx-total-box-bottom-bg-image-repeat,
						$gx-total-box-bottom-bg-image-size,
						$gx-total-box-bottom-bg-image-attachment,
						$gx-total-box-bottom-bg-image-enabled,   
						$gx-total-box-bottom-bg-gradient-enabled,
						$gx-total-box-bottom-bg-gradient-color1, 
						$gx-total-box-bottom-bg-gradient-color2, 
						$gx-total-box-bottom-bg-gradient-type,   
						$gx-total-box-bottom-bg-gradient-angle);
				
				@include border-bottom-radius($gx-cart-border-radius);

				td {
					padding: ($grid-gutter-width / 4) ($grid-gutter-width / 2);
					border-color: transparent;

					.total-info {
						font-size:   $font-size-base;
						font-weight: normal;
					}

					@media (max-width: $screen-sm) {
						body.page-shopping-cart & {
							&:first-child {
								padding-left: 0;
							}

							&:last-child {
								padding-right: 0;
							}
						}
					}
				}

				&.sum {
					td {
						padding: ($grid-gutter-width / 2) ($grid-gutter-width / 2) ($grid-gutter-width / 4) ;
						border-color: $gx-total-box-border-color;

					&:nth-of-type(1) {
						@include thick-heading();
					}

					&:nth-of-type(2) {
						font-size: $font-size-h3;
						font-weight: bold;
					}
					}
				}

				&.checkout-button {
					td {
						padding-bottom: ($grid-gutter-width / 2);
					}
				}
				
				&:last-of-type {
					td {
						padding-bottom: ($grid-gutter-width / 2);
						/*
						// N.B.: (13px * 1.42857) + (2 * 9px) + (2 * 1px) is the height of the checkout button (cf. below)
						padding: ($grid-gutter-width / 2) ($grid-gutter-width / 2) ((13px * 1.42857) + (2 * 9px) + (2 * 1px) + $grid-gutter-width) ($grid-gutter-width / 2);
						*/
					}
			}
		}
	}

		tr.redeem-gift-coupon-code {
			td {
				border: none;
				padding: $grid-gutter-width/2 0;
			}
		}

	}

	
	div.ot-coupon-info,
	div.ot-gv-info {
		div.ot-coupon-info-block,
		div.ot-gv-info-block {
			padding: 1ex 1em;
			overflow: hidden;
			transition: height 0.25s;
			margin: auto;
			background-color: $gx-total-box-bottom-bg-color; // #f0f0f0;
		}
		
		div#ot-coupon-info-toggle {
			cursor: pointer;
		}
	}

	a.toggleusebalance {
		text-decoration: none;
	}
	
	div.gift-coupon-code-entry {
		overflow: auto;
	}
	
	#gift-coupon-cell {
		div#gift-coupon-toggle {
			cursor: pointer;
		}
		
		span.rotating-caret {
			float: right;
			transition: transform 0.25s;
		}

		div#gift-coupon-block {
			transition: height 0.25s;
			overflow: hidden;
		}
		
		&.extended {
			#gift-coupon-block {
				height: 125px;
			}
			
			span.rotating-caret {
				transform: rotate(-180deg);
			}
		}
	}
}

.shopping-cart-button {
	padding: 0;
	clear: right;

	@media (min-width: $screen-md-min) {
		padding: 0 ($grid-gutter-width / 2);
	}

	.total-block-wrapper {
		min-height: 75px;
	}
}

.shared_cart_label {
	position: relative;
	top: 30px;
}

//gift cart modal layer

.gift-cart-content-wrapper {
	input {
		&#gv_redeem_code {
			width: 65%;
			margin: 0 auto;
		}
	}

	input[type="submit"] {
		&.btn {
			display: block;
			margin: 15px auto;
			width: 65%;
		}
	}
}

.chevron-right {
	height: $gx-chevron-right-size;
	width: $gx-chevron-right-size;
	fill: $gx-chevron-right-color;
}

.shopping-cart-shipping-payment-text {
	color: #595959;
	font-size: $font-size-small;
	margin: $grid-gutter-width 0;
	padding: 0;
}

// shared shopping cart

.share-cart-content-wrapper {
	input,
	.row {
		display: block;
		margin: 0 auto 12px;
		width: 80%;
	}

	.row.text {
		padding: 0 60px;
	}

	.row:last-child {
		margin-bottom: 0;
	}
}

// underlined links

#ot-coupon-info-toggle,
#ot-gv-info-toggle,
#ot-shipping-info-toggle {
	.fa, .fas, .far {
		color: $brand-primary;
		cursor: pointer;
		padding-left: 3px;
	}
}

.total-box,
.shopping-cart-shipping-payment-text {
	a {
		color: inherit;
		text-decoration: underline;

		.glyphicon,
		.fa,
		.fas {
			color: $brand-primary;
		}
		
		&.button-submit {
			text-decoration: none;
		}
	}

	span.button-disabled {
		cursor: not-allowed;
		@include button-variant(darken($gx-btn-primary-color, 10%), darken($gx-btn-primary-bg-color, 10%), darken($gx-btn-primary-border, 10%));
	}

	a.cart-action-link {
		padding: 12px 0 0;
		display: inline-block;
		cursor: pointer;
        color: $brand-primary;
		text-decoration: none;
		
		&:hover {
            color: #4F4F4F;
			text-decoration: underline;
		}
		
		&:active,
		&:focus {
			border: none;
			color: $brand-primary;
			outline: none;
			text-decoration: none;
		}
		
		&:last-child {
			float: right;
		}
	}
}

.coupon-box {
	@include border-radius($gx-cart-border-radius);
	padding: $grid-gutter-width / 2;
	margin-top: $grid-gutter-width / 2;
	background-color: transparent;
	
	#gift-coupon-block {
		.gv-amount {
			color: #999;
			
			.gv-amount-toggleuse {
				margin: ($grid-gutter-width / 3) 0;
			}
			
			input[type="checkbox"] {
				vertical-align: text-bottom;
				margin: 0 5px 0 0;
			}
		}
		
		button#gift-coupon-code-submit {
			height: 38px;
			background-color: $input-border;
		}
	}
}

.gift-coupon-code-input {
	@include border-left-radius(18px);
	border-width: 0;
	background-color: #f3f3f3;
}

#gift-coupon-note-block {
	margin-top: $grid-gutter-width / 2;
	color:     #999999;
	font-size: $font-size-small;
}

.gift-coupon-code-entry {
	.btn {
		height: 38px;
	}
}



.checkout-buttons {
	display: inline-block;
	margin: 24px 0;
	width: 100%;
	text-align: center;

	.checkout-buttons-or {
		margin: 1ex 0;
	}
	
	a {
		display: block;
	}
	
	img {
		cursor: pointer;
		margin-bottom: 10px;
	}

	@media (max-width: $screen-xs-max) {
		.paypal-ec-button {
			margin-right: -2px
		}
	}

	@media (min-width: $screen-sm-min) {
		.paypal-ec-button {
			margin-top: -6px;
			margin-left: 6px;
		}
	}
}


.shopping-cart-content-note {
	margin-top: 24px;
	margin-bottom: 24px;
}

@media (max-width: $screen-xs-max) {
	.page-shopping-cart .gx-content-zone {
		clear: both;
	}
}
